<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/equip/equip.css">
  <script src="/public/jQuery.min.js"></script>
  <link rel="stylesheet" href="/public/swiper-bundle.min.css">
  <!-- jq -->
  <script src="/public/jQuery.min.js"></script>
  <!-- jq -->
  <!-- 轮播图 -->
  <link rel="stylesheet" href="/public/swiper-bundle.min.css">
  <script src="/public/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="/css/index/index.scss">
  <!-- 轮播图 -->
  <title>找装备</title>
</head>

<body>
  <div id="equip">
    <!-- 头部  -->
    <div class="header">
      <header>
        {include file="/component/header" /}
      </header>
    </div>
    <!-- 头部  -->
    <!-- body -->
    <div class="equip">
      <!-- 搜搜 -->
      <div class="searchbox">
        <div class="sleft">
          <img src="/img/equip/slogo.png" alt="">
        </div>
        <div class="scenter">
          <div class="camer">
            <input type="text" class="scinput" placeholder="请输入产品名称">
            <img src="/img/equip/camer.png" alt="">
          </div>
          <button class="scbut">
            <img src="/img/equip/fangda.png" alt="">
          </button>
        </div>
        <div class="sright">
          <div class="shop">
            <img src="/img/equip/shop.png" alt="">
          </div>
          <p class="shoptit">购物车</p>
        </div>
      </div>
      <!-- 搜搜 -->
      <!-- 第二层 -->
      <div class="equipnav">
        <div class="navlist">
          <p class="listtit">找装备</p>
<!--          这里不会循环 先这样 等我学会 循环再过来修改-->
          <div class="food">
            <img src="/img/equip/camer.png" alt="">
            <p class="fooftit">
              <a href="#">{$equipType[0]['title']}/{$equipType[1]['title']}/{$equipType[2]['title']}</a></p>
          </div>
          <div class="food">
            <img src="/img/equip/camer.png" alt="">
            <p class="fooftit">
              <a href="#">{$equipType[3]['title']}/{$equipType[4]['title']}/{$equipType[5]['title']}</a></p>
          </div>
          <div class="food">
            <img src="/img/equip/camer.png" alt="">
            <p class="fooftit">
              <a href="#">{$equipType[6]['title']}/{$equipType[7]['title']}/{$equipType[8]['title']}</a></p>
          </div>

          <div class="morebox">
            <div class="content">
              <div class="food">
                <img src="/img/equip/camer.png" alt="">
                <p class="fooftit"><a href="">餐具/锅具/炊具</a></p>
              </div>
              <div class="food">
                <img src="/img/equip/camer.png" alt="">
                <p class="fooftit"><a href="">帐篷/睡袋/充气床</a></p>
              </div>
            </div>
            <p class="more">查看更多</p>
            <div class="arrow">
              &#9660;
            </div>
          </div>
        </div>
        <div class="navswiper">
          <div class="swiper">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                {foreach name = "equip" item = "v"}
                <div class="swiper-slide" style="position: relative;" >
                  <img src="{$v.image}" alt="" width="1000px" height="600px">
                </div>
               {/foreach}
              </div>
            </div>
          </div>
        </div>

        <div class="navshop">
          <div class="shopimg">
            <img src="/img/equip/shop1.png" alt="">
          </div>
          <div class="shopimg">
            <img src="/img/equip/shop2.png" alt="">
          </div>
          <div class="shopimg">
            <img src="/img/equip/shop3.png" alt="">
          </div>
        </div>


        <div class="navright">
          <div class="navrbox">
            <p><a href="#">营地秒杀</a></p>
          </div>
          <div class="navrbox">
            <p>
              <a href="#">猜你喜欢</a>
            </p>
          </div>
          <div class="navrbox">
            <p><a href="#">营地客服</a></p>
          </div>
          <div class="navrbox">
            <p><a href="#">营地反馈</a></p>
          </div>
          <div class="navrbox">
            <p><a href="#">返回顶部</a></p>
          </div>
        </div>
      </div>
      <!-- 第二层 -->
      <!-- 营地秒杀 -->
      <div class="killbox">
        <div class="kill">
          <p class="killtit">营地秒杀</p>
          <div class="killimg">
            <img src="/img/equip/blogo.png" alt="">
          </div>
          <p class="killtime"><span>18:00</span> 点场 距结束</p>
          <p class="killdata"><span class="killtext">00</span>:<span>10</span>:<span>12</span></p>
        </div>
        <div class="killswiper">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" style="display: flex;justify-content: space-between;">
                {foreach name = "equip" item = "v"}
                <div class="tent">
                  <div class="tentimg">
                    <img src="{$v.image}" alt="">
                  </div>
                  <p class="tenttit">{$v.name}</p>
                  <button class="tentbut">立即抢购</button>
                </div>
                {/foreach}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 营地秒杀 -->
      <!-- 猜你喜欢 -->
      <div class="like">
        <p class="tit">猜你喜欢</p>
        <div class="likecontent">
          <div class="likebox">
            <div class="likeone">
              <div class="liketitbox">
                <p class="liketit">{$you_like[0]['title']}</p>
                <p class="liketext">{$you_like[0]['abs']}</p>
              </div>
              <div class="likeimg">
                <img src="{$you_like[0]['image']}" alt="">
              </div>
            </div>
          </div>
          <div class="likeboxtwo">
            <div class="liketwo">
              <div class="liketitbox">
                <p class="liketit2">{$you_like[1]['title']}</p>
                <p class="liketext">{$you_like[1]['abs']}</p>
              </div>
              <div class="likeimg">
                <img src="{$you_like[1]['image']}" alt="">
              </div>
            </div>
          </div>
          <div class="book">
            <div class="booktop">
              <div class="booktitbox">
                <p class="booktit">{$you_like[4]['title']}</p>
                <p class="bookp">{$you_like[2]['abs']}</p>
              </div>
              <div class="bookimg">
                <img src="{$you_like[2]['image']}" alt="">
              </div>
            </div>
            <div class="booktop">
              <div class="booktitbox">
                <p class="booktit">{$you_like[5]['title']}</p>
                <p class="bookp">{$you_like[3]['abs']}</p>
              </div>
              <div class="bookimg">
                <img src="{$you_like[3]['image']}" alt="">
              </div>
            </div>
          </div>
          <!-- 第四列鞋子 -->
          <div class="book">
            <div class="shoetop">
              <div class="shoetitbox">
                <p class="shoetit">{$you_like[2]['title']}</p>
                <p class="shoep">{$you_like[4]['abs']}</p>
              </div>
              <div class="shoeimg">
                <img src="{$you_like[4]['image']}" alt="">
              </div>
            </div>
            <div class="shoetop">
              <div class="shoetitbox">
                <p class="shoetit">{$you_like[3]['title']}</p>
                <p class="shoep">{$you_like[5]['abs']}</p>
              </div>
              <div class="shoeimg">
                <img src="{$you_like[5]['image']}" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
    </div>
    <!-- body -->
    <!-- 脚部 -->
    <div class="footer">
      <footer>
        {include file="/component/footer" /}
      </footer>
    </div>
    <!-- 脚部 -->
  </div>

     
  <script>
    // 头部尾部
    $(function () {
      // $("equipheader").load("./components/equipheader.html")
      // $("footer").load("./components/footer.html")
    });
    // 头部尾部
    // 查看更多
    const container = document.querySelector('.navlist');
    const content = document.querySelector('.content');
    const arrow = document.querySelector('.arrow');
    const more = document.querySelector('.more');
    let isContentVisible = false;

    arrow.addEventListener('click', () => {
      if (isContentVisible) {
        content.style.maxHeight = '0';
        arrow.innerHTML = '&#9660;';
        more.style.display = 'block'

      } else {
        content.style.maxHeight = '200px'; // 调整内容的最大高度
        arrow.innerHTML = '&#9650;';
        more.style.display = 'none'

      }
      isContentVisible = !isContentVisible;
    });
    // 查看更多
    // 轮播图
    var swiper1 = new Swiper('.swiper-container:nth-child(1)', {
      direction: 'horizontal', // 水平切换选项
      loop: true, // 循环模式选项
      autoplay:true,

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
        clickable: true,
      },
      // 其他配置选项...
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })
    // 轮播图
    // kill轮播图
    var swiper2 = new Swiper('.swiper-container:nth-child(2)', {
      pagination: '.swiper-pagination',
      slidesPerView: 4,
      paginationClickable: true,
      spaceBetween: 3,
      autoplay:true,
      loop:true,

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
        clickable: true,
      },
      // 其他配置选项...
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })
    // kill轮播图
  </script>
</body>

</html>
